'use strict';

var app = angular.module('theApp', []);

/* Directives */
app.directive("recipientForm", function ($http, $compile) {
	var segmentState = false;
	var segmentContainer = angular.element('<div id="segmentContainer"></div>').hide();

	return {
		restrict: 'A',
		//transclude: true,
		//template: '<a href="#">Send to segment</a>',
		//scope: {},
		link: function(scope, element, attrs) {
			var inputs = element.find('input[type=radio]');
			var segmentContainer = angular.element('<div id="segmentContainer"></div>').hide();
			//var fieldContainer = angular.element('<div id="fieldContainer"></div>');
			var operationContainer = angular.element('<div id="operationContainer"></div>');
			var segmentStatus = false;
			var listId;
			var checkTheBox = function(box) {
				var boxParent = box.parent();
				var containerParent = segmentContainer.parent();
				if (boxParent[0] != containerParent[0]) {
					closeSegment();
				}
				
				if (!box.prop('checked')) {
					box.prop('checked', true);
					//closeSegment();
				}
				angular.forEach(inputs, function(v){
					var value = angular.element(v);
					if(box.val() == value.val()) {
						return true;
					}
					value.parent().removeClass('theBorder');
				});				
				box.parent().addClass('theBorder');
			}
			var listDIVCheck = function() {
				var box = angular.element(this).children('input');
				checkTheBox(box);
			}
			var closeSegment = function() {
				if (segmentStatus) {
					segmentContainer.hide().empty().detach();
					segmentStatus.html('&blacktriangleright;Send to segment');
					segmentStatus = false;
					return true;
				}
				return false;
			}
			var toggleSegment = function(e) {				
				var containerParent = segmentContainer.parent();
				var parent = angular.element(this).parent();
				listId = parent.children('input').val();
				if (!closeSegment() || (parent[0] != containerParent[0])) {
					parent.append(segmentContainer);
					segmentStatus = angular.element(this);
					segmentStatus.html('&blacktriangledown;Cancel segment');
					$http.post(Routing.generate('account_campaign_segment'), {'listid': listId}).success
					(function(data) {			
						//segmentContainer.append($compile(data)(scope));
						segmentContainer.append(data);
						segmentContainer.show('slow');
						segmentContainer.children('select').on("change", getOperations);
						segmentContainer.children('select').triggerHandler('change');
					});
				}
				e.preventDefault();
			}
			var getOperations = function(){
				var elem = angular.element(this);
				var field = elem.val();
				$http.post(Routing.generate('account_campaign_operation'), {'listid': listId, 'field': field}).success(function(data) {
					//$compile(data)($scope).appendTo($('#' + formContainerId));
					operationContainer.empty().append(data);
					segmentContainer.append(operationContainer);	
				});
			}
			angular.element('.recipientListRadio').on('click',listDIVCheck);
			//var segmentToggleLink = $compile('<a href="#">&blacktriangleright;Send to segment{{bro}}</a>')(scope);
			var segmentToggleLink = angular.element('<a href="#">&blacktriangleright;Send to segment</a>');
			segmentToggleLink.on('click', toggleSegment);
			angular.element('.recipientListRadio').append(segmentToggleLink);
			
		}
	}
});
app.directive("segmentForm", function ($http, $compile) {
	var segmentState = false;
	var segmentContainer = angular.element('<div id="segmentContainer"></div>').hide();
	var listDIVCheck = function(e){
		e.stopPropagation();
		var input = angular.element(this).children('input');
		if (!input.prop('checked')) {
			input.prop('checked', true);
		}
		var a =1;
		//alert(b);
	}

	return {
		restrict: 'A',
		//transclude: true,
		//template: '<a href="#">Send to segment</a>',
		//scope: {},
		link: function(scope, element, attrs) {
			var getOperations = function(){
				var elem = angular.element(this);
				var field = elem.val();
				$http.post(Routing.generate('account_campaign_operation'), {'listid': scope.listid, 'field': field}).success(function(data) {
					//$compile(data)($scope).appendTo($('#' + formContainerId));
					alert(data);		
				});
			}
			var toggleSegment = function(){
				var thisParent = angular.element(this).parent();
				var theInput = thisParent.children('input');
				theInput.trigger('click');
				if (segmentState) {
					segmentState.innerHTML = '&blacktriangleright;Send to segment';
					segmentContainer.hide().empty().detach();
					segmentState = false;
				} else {
					this.innerHTML = '&blacktriangledown;Cancel segment';
					thisParent.append(segmentContainer);
					segmentState = this;
					$http.post(Routing.generate('account_campaign_segment'), {'listid': scope.listid}).success
					(function(data) {			
						//$compile(data)($scope).appendTo($('#' + formContainerId));
						//alert(data);
						segmentContainer.append($compile(data)(scope));
						segmentContainer.show('slow');
						segmentContainer.children('select').on("change", getOperations);
						segmentContainer.children('select').triggerHandler('change');
					});
				}
				return false;
			}			
			element.bind('click', listDIVCheck);
			var segmentToggleLink = angular.element('<a href="#">&blacktriangleright;Send to segment</a>');
			element.append(segmentToggleLink);
			var e = scope.listid;
			segmentToggleLink.bind('click', toggleSegment);
			
		}
	}
});
/* Controllers */

function ListSegmentCtrl($scope, $http, $compile) {
	var segmentLinkActive = 'Cancel segment';
	var segmentLinkInactive = 'Segment';
	var formContainerId = 'formContainer';
	var operationContainerId = 'operationContainer';
	var segmentStatus = false;
	var getContainer = function(id) {
		return '<div id="' + id + '"></div>';
	}
	//$scope.field = 'email';
	/*$scope.$watch('field', function(newValue) {
		alert(newValue);
	});*/
	$scope.listDivCheck = function(e) {
		e.stopPropagation();
		//$(e.currentTarget).children('input').first().prop("checked", true);
		$scope.listid = $(e.currentTarget).children('input').first().val();
		//$(e.currentTarget).children('input').first().trigger('click');
		if (segmentStatus) {
			var $container = $(e.currentTarget).children('#' + formContainerId);
			if (!$container.length) {
				$('#' + formContainerId).remove();
				segmentStatus = false;
			}
		}		
	}
	$scope.getSegmentForm = function(e) {
		e.preventDefault();
		e.stopPropagation();
		$scope.listid = $(e.currentTarget).siblings('input').first().val();
		if (segmentStatus) {
			$('#' + formContainerId).remove();
			$(e.target).text(segmentLinkInactive);
			segmentStatus = false;
		} else {	
			$(e.target).after(getContainer(formContainerId));
			$http.post(Routing.generate('account_campaign_segment'), {'listid': $scope.listid}).success
			(function(data) {			
				$compile(data)($scope).appendTo($('#' + formContainerId));
			}).error
			(function(data) {
				$compile(data)($scope).appendTo($('#' + formContainerId));
			});
			$(e.target).text(segmentLinkActive);
			segmentStatus = true;
		}

	}
  $scope.getOperationsForm = function() {
	  //$event.preventDefault();
	  //alert();
	  alert($scope.field);
	  /*$($scope.getContainer(operationContainerId));
	$http.post(Routing.generate('account_campaign_operation'), {'listid': $scope.listid, 'field': $scope.field}).success(function(data) {
		$compile(data)($scope).appendTo($('#' + formContainerId));		
	});	*/
  }
}

//PhoneListCtrl.$inject = ['$scope', '$http'];
/*
	  var foo;
	  var res = new Array();
	  for (foo in $event.target.nextElementSibling) {
		  res.push(foo);
	  }
	  alert(res.sort()); 
 */
